<template>
    <div class="home">
        <div class="info">
          <div class="date">
            11.27-12.12
          </div>
          <div class="">
            ID: <span>{{phone}}</span>
          </div>
        </div>
        <div class="title" >
            <div class="titleimg"><img :src="titlebg" alt="" class="bg"></div>
            <div class="titleinfo">
              {{describe}}
            </div>
        </div>
        <div class="point_describe" v-if="scriptid==4" disabled >
          {{club.point_describe?club.point_describe:subinfo[0].point_describe}}
        </div>
        <div class="script" v-else>
          <div class="btn" >
            <div :class="index==active?'btns1':'btns'" v-for="(item,index) in subinfo" :key="item.id" @click="handlechange(index)">
              {{item.title}}
            </div>
          </div>
          <div class="child">
            <div class="childImg"><img 
            :src="!handlebian?wenhao:club.clue_img?club.clue_img:subinfo[0].clue_img" alt="">
            </div>
            <div class="childText">{{handlebian?club.clue_describe:club.point_describe?club.point_describe:subinfo[0].point_describe}}</div>
            <!-- <img src="../assets/img/wenhao.png" alt=""> -->
          </div>
        </div>
          <div class="command" v-if="!handlebian">
            <input 
              type="text" 
              :placeholder="club.point?club.point:subinfo[0].point"
              v-model="userpass"
              ref="clear"
            >
            <div class="submit" @click="handleSubmit()">
              <img src="../assets/img/submitbtn.png" alt="" class="sub">
            </div>
          </div>
          <div class="result" v-else>
            {{club.clue_content}}
          </div>
        <!-- (this.userclubid).indexOf(this.clueId)==-1?wenhao: -->
    </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);
export default {
  data(){
   return {
    wenhao:"http://source.headlinetop.com/nanwenquan/wen.png",
    id:'',
    active:'0',
    phone:'',
    status:'0',
    scriptid:"",
    salt:'',
    token:'',
    // baseUrl:'http://192.168.111.31:80',
    baseUrl:'https://tiaodao.headlinetop.com',
    //当前所在的小场景id
    clueId:'',
    titlebg:'',
    describe:'',
    //场景信息中获得的数据
    subinfo:null,
    //点击获得数据
    club:{},
    //当前所在的小场景id
    nowid:'',
    userpass:'',
    officialpass:'',
    //用户通关过的id目录
    userclubid:null,
   }
  },
  created(){
    this.salt=sessionStorage.getItem('web-token')
    this.token=sessionStorage.getItem('token')
    let {scriptid}=this.$route.params;
    
    this.scriptid=scriptid
    this.getUserInfo()
    this.getScriptInfo()
    console.log(this.club);
    
  },
  mounted(){
        // console.log(this.userclubid);
        // console.log(this.clueId);
        // 不能拿到
  },
  methods:{
    //获取用户信息
    getUserInfo(){
        axios.get(this.baseUrl+`/web/Script/getUserInfo?user_token=${this.token}`,{
            headers:{
                "web-token":this.salt
            }
        })
        .then((res)=>{
            console.log(res);
            let result=res.data.data
            this.phone=result.phone
            //拿到用户通关的目录 nums.map(Number)
            this.userclubid=(result.script_clue_id).map(Number)
            console.log(this.userclubid);
            // Toast.success(res.data.data.msg);
            
        })
    },
    //获取场景信息
    getScriptInfo(){
        axios.get(this.baseUrl+`/web/Script/getScriptInfo?id=${this.scriptid}`,{
            headers:{
                "web-token":this.salt
            }
        })
        .then((res)=>{
          let result=res.data.data
          this.titlebg=result.img
          this.describe=result.describe
          let btn=result.clue_str
          this.subinfo=result.clue_str
          this.clueId=btn[0].id
          this.officialpass=btn[0].pass
        })
        .then(()=>{
          this.handlechange(0)
        })
    },
    //更新通关记录
    saveUserScript(){
        axios.post(this.baseUrl+`/web/Script/saveUserScript?user_token=${this.token}`,
              qs.stringify({"script_clue_id":this.clueId}), 
              {
              headers:{
                  "web-token":this.salt,
                  // "token":this.token
              }
              }
          )
          .then((res)=>{
              console.log(res);
            this.userpass=""  
            if(res.data.code==200){
              Toast.success(res.data.msg);
              this.getUserInfo()
              if(this.scriptid==4){
                this.$route.push('/content/'+4)
              }  
            }else{
              Toast.fail("错误");  
            }
          })
    },
    handlechange(id){
      console.log(id);
      this.club=this.subinfo[id]

      this.active=id
      console.log(this.active);
      this.officialpass=this.subinfo[id].pass
      this.clueId=this.subinfo[id].id
      console.log(this.clueId);
    },
    handleSubmit(){
      if(this.officialpass==this.userpass){
        this.saveUserScript()
      }else{
        console.log(false);
        Toast.fail('密码错误')
        this.userpass=""
      }
    },
    
  },
  computed:{
      handlebian:function(){
        if(this.userclubid&&this.clueId){
          return (this.userclubid).includes(this.clueId)
        }else{
          return this.baseUrl
        }
        
      }
  }
}
</script>
<style lang='less' scoped>
.home{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  background-image: url(../assets/img/bg2.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}
.bg{
    width: 100%;
    height: 100%;
}
    .info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    /* margin: 150px auto 0px; */
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    /* margin: 0 auto; */
    position: absolute;
    top: 18vw;
    left: 10vw;
    }
    
    .title{
        width: 86%;
        height: 60vw;
        position: absolute;
        top: 24vw;
        left: 7%;
        background: #ded7c5;
    }
    .titleimg{
        width: 95%;
        height: 53%;
        background-color: blanchedalmond;
        margin: 3px auto;
    }
    .titleinfo{
        width: 93%;
        height: 42%;
        margin: 3px auto;
        padding: 3px;
        font-size: 16px;
        overflow-y: auto;
        text-align: justify;
        box-sizing: border-box;
    }
    .point_describe{
      width: 86vw;
      height: 55vw;
      position: absolute;
      top: 90vw;
      left: 7vw;
      background: #ded7c5;
      margin: 3px auto;
      padding: 3px;
      overflow-y: auto;
      box-sizing: border-box;
      font-size: 16px;
      text-align: justify;
    }
    
    .btn{
      width: 86vw;
      height: 8vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      top: 90vw;
      left: 7vw;
      .btns{
        width: 20%;
        height: 100%;
        color: #583724;
        font-size: 20px;
        font-weight: 900;
        padding: 0px 0 0 10px;
        // line-height: 100%;
        // background: aqua;
        background-image: url(../assets/img/btn.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .btns1{
        width: 20%;
        height: 100%;
        color: #583724;
        font-size: 20px;
        font-weight: 900;
        padding: 0px 0 0 10px;
        // line-height: 100%;
        // background: aqua;
        background-image: url(../assets/img/btn.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        // border-radius: 1px solid red;
        background: #b74314;
        color: #fff;
      }
    }
    .child{
      width: 86vw;
      height: 40vw;
      position: absolute;
      top: 105vw;
      left: 7vw;
      display: flex;
      justify-content: space-between;
      // border: 1px solid red;
      .childImg{
        width: 40vw;
        height: 40vw;
        background: #ffe3c5;
        border-radius: 5px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .childText{
        width: 38vw;
        height: 38vw;
        background: #ded7c5;
        padding: 5px;
        font-size: 14px;
        overflow-y: auto;
      }
    }
    .command{
      width: 86vw;
      height: 10vw;
      position: absolute;
      top: 152vw;
      left: 7vw;
      display: flex;
      justify-content: space-between;
      // border: 1px solid red;
      input{
        width: 60%;
        height: 100%;
        background: #fff;
        padding-left: 15px;
        font-size: 14px;
        border-radius: 5px;
      }
      .submit{
        width: 24%;
        height: 100%;
        // background: yellow;
        .sub{
          width: 100%;
          height: 100%;
        }
      }
    }
    .result{
      width: 83.5vw;
      height: 15vw;
      position: absolute;
      top: 152vw;
      left: 7vw;
      background: #ded7c5;
      padding: 5px;
      font-size: 14px;
      overflow-y: auto;
    }
</style>